{% extends "../../main.html" %}

{% block title %}{{_("Create Flag")}}{% end %}

{% block header %}
<link rel="stylesheet" href="/static/css/markdown-toolbar.css" type="text/css" />
<script src="/static/js/libs/commonmark.min.js"></script>
<script src="/static/js/libs/markdown-toolbar.js"></script>
<script src="/static/js/pages/admin/create/flags.js"></script>
{% end %}

{% block content %}
{% from models.Box import Box %}
{% from tornado.options import options %}
<div class="container">
    <h1>
        <i class="fa fa-flag"></i>
        {{_("Create Datetime Flag")}}
    </h1>
    <br />
    {% if errors is not None and len(errors) != 0 %}
        {% for error in errors %}
        <div class="alert alert-error">
            <a class="close" data-dismiss="alert" href="#">&times;</a>
            <h4 class="alert-heading">{{_("ERROR")}}</h4>
            {{ error }}
        </div>
        {% end %}
    {% end %}
    <div class="well">
        <div class="row">
            <div class="span4">
                <form class="form-horizontal" action="/admin/create/flag/datetime" method="post">
                    {% raw xsrf_form_html() %}
                    <input id="flagtype" type="hidden" value="datetime" />
                    <div class="control-group">
                        <label class="control-label" for="flag_name">{{_("Flag Name")}}</label>
                        <div class="controls">
                            <input autofocus id="flag-name" maxlength="16" name="flag_name" type="text" placeholder="({{_('Optional')}})"
                                    rel="popover"
                                    data-original-title="{{_('Flag Name')}}"
                                    data-content="{{_('This is what you want the flag to be displayed as.  Leave blank to be named automatically by order #.')}}" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="box_uuid">{{_("Box")}}</label>
                        <div class="controls">
                            <select id="box-uuid" name="box_uuid"
                                    rel="popover"
                                    data-original-title="{{_('Box')}}"
                                    data-content="{{_('This is the box the flag is located on.')}}">
                                <option value=""></option>
                                {% for thebox in Box.all() %}
                                <option value="{{ thebox.uuid }}"{% if box and box.uuid == thebox.uuid %} selected{% end %}>
                                    {{ thebox.name }}{% if thebox.corporation.name != "" %} ({{ thebox.corporation.name }}){% end %}
                                </option>
                                {% end %}
                            </select>
                        </div>
                    </div>
                     <div class="control-group">
                        <label class="control-label" for="reward">{% if options.banking %}{{_("Reward")}}{% else %}{{_("Points")}}{% end %}</label>
                        <div class="controls">
                            <input required id="reward" name="reward" type="number" pattern="[0-9]+" placeholder="{% if options.banking %}{{_('$')}} {{_('Reward')}}{% else %}{{_('Points')}}{% end %}"
                                   rel="popover"
                                   data-original-title="{% if options.banking %}{{_('Reward')}}{% else %}{{_('Points')}}{% end %}"
                                   data-content="{{_('This is the amount awarded for capturing the flag.')}}">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="description">{{_("Description")}}</label>
                        <div class="controls">
                            <textarea required class="toolbar" id="description" name="description" maxlength="1024" rows="5" type="text" placeholder="{{_('Description')}}"
                                    rel="popover"
                                    data-original-title="Description"
                                    data-html="true"
                                    data-content="{{_('This is the description')}} [Max: 1024 {{_('Characters')}}].<br/><br/>{{_('Supports')}} Markdown (GitHub Style)">
                            </textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="token">{{_("Token")}}</label>
                        <div class="controls">
                            <input required id="token" name="token" maxlength="256" type="text" placeholder="{{_('Datetime Token')}}" autocomplete="off">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="test_token">{{_("Test Flag")}}</label>
                        <div class="controls" style="position:relative;">
                            <span style="position: absolute; left: 230px; top: 3px; font-size: 175%;">
                                <i id="testtrue" class="fa fa-check" style="color: green; display: none;"></i>
                                <i id="testfalse" class="fa fa-times" style="color: red; display: none;"></i>
                            </span>
                                <input id="test-token" name="test_token" type="text" placeholder="{{_('Enter a Matching Flag')}}" autocomplete="off"
                                    rel="popover"
                                    data-original-title="{{_('Token')}}"
                                    data-content="{{_('This is a test flag/string the user could input for credit.')}}" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="edit-flag-lock">{{_("Dependent Flag")}}</label>
                        <div class="controls">
                            <select id="edit-flag-lock" name="lock_uuid"></select>
                        </div>
                    </div>
                    {% if options.story_mode %}
                    <div class="control-group">
                        <label class="control-label" for="capture-message">{{_("Capture Message")}}</label>
                        <div class="controls">
                            <textarea id="capture-message" name="capture_message" type="text" placeholder="({{_('Optional')}})"
                                    rel="popover"
                                    data-original-title="{{_('Capture Message')}}"
                                    data-content="{{_('This is the message displayed to the user once the flag is captured.')}}" >
                            </textarea>
                        </div>
                    </div>
                    {% end %}
                    <div class="control-group">
                        <div class="controls">
                            <button class="btn btn-primary" type="submit">{{_("Create Flag")}}</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="offset3 span4">
                <p>
                    <blockquote>
                        <small>
                            <strong>{{_("Tokens")}}:</strong>
                            {{_("In this case, the flag is a Date / Time string. This flag type will try to match on common datetime format variations and deal with differences like slashes, dashes, padding, 12hr, 24hr, etc.  It can handle a date, time, or a datetime.")}}
                        </small>
                    </blockquote>
                </p>
            </div>
        </div>
    </div>
</div>
{% end %}
